<%--
  Created by IntelliJ IDEA.
  User: LYK
  Date: 2017/5/3
  Time: 10:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<title>echart_radar</title>
	<jsp:include page="/static/commonviews/header.jsp"/>
</head>
<body>
<div style="margin-top: 30px">
	<div id="main" style="height:400px"></div>
</div>

<jsp:include page="/static/commonviews/footer.jsp"/>
<script type="text/javascript">
	var chart = echarts.init(document.getElementById('main'));
	chart.setOption({
		title : {
			text: '预算 vs 开销（Budget vs spending）',
			subtext: '纯属虚构'
		},
		tooltip : {
			trigger: 'axis'
		},
		legend: {
			orient : 'vertical',
			x : 'right',
			y : 'bottom',
			data:['预算分配（Allocated Budget）','实际开销（Actual Spending）']
		},
		toolbox: {
			show : true,
			feature : {
				mark : {show: true},
				dataView : {show: true, readOnly: false},
				restore : {show: true},
				saveAsImage : {show: true}
			}
		},
		polar : [
			{
				indicator : [
					{ text: '销售（sales）', max: 6000},
					{ text: '管理（Administration）', max: 16000},
					{ text: '信息技术（Information Techology）', max: 30000},
					{ text: '客服（Customer Support）', max: 38000},
					{ text: '研发（Development）', max: 52000},
					{ text: '市场（Marketing）', max: 25000}
				]
			}
		],
		calculable : true,
		series : [
			{
				name: '预算 vs 开销（Budget vs spending）',
				type: 'radar',
				data : [
					{
						value : [4300, 10000, 28000, 35000, 50000, 19000],
						name : '预算分配（Allocated Budget）'
					},
					{
						value : [5000, 14000, 28000, 31000, 42000, 21000],
						name : '实际开销（Actual Spending）'
					}
				]
			}
		]
	});
</script>
</body>
</html>
